<!-- frontend/src/views/goods/components/Description.vue -->
<script setup>
const props = defineProps({
  goods: {
    type: Object,
    required: true
  }
})
console.log(props.goods)
const formatPrice = (price) => {
  return parseFloat(price).toFixed(2)
}
</script>
<template>
  <div class="description">
    <h3>商品描述</h3>
    <div class="description-content">
      {{ goods.description }}
    </div>
    
    <el-divider />
    
    <h3>商品参数</h3>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="商品编号">{{ goods.id }}</el-descriptions-item>
      <el-descriptions-item label="商品名称">{{ goods.title }}</el-descriptions-item>
      <el-descriptions-item label="商品类别">{{ goods.subtitle }}</el-descriptions-item>
      <el-descriptions-item label="商品价格">¥{{ formatPrice(goods.price) }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>



<style lang="scss" scoped>
.description {
  .description-content {
    line-height: 1.8;
    color: #333;
    font-size: 16px;
  }
}
</style>